import React, { useContext, useEffect, useState, useCallback, useMemo, useRef } from 'react';
import { useTranslation, getI18n } from 'react-i18next';
import { Steps, Popover, Progress, Input, message, Spin, Dropdown, Menu as AntMenu } from 'antd';
import { useHistory, } from 'react-router-dom'
import style from './index.module.scss'
import WhiteHeightSpace from '@/components/WhiteSpace/WhiteHeightSpace';
import { isMobileHandle } from '@/utils/utils'
import Images from '@/image'
import RouterConfig from '@/object/RouterConfig';
interface IProps{
     account: undefined | null | string
}
const NftNode = (props:IProps) => {
     const { push, location: { pathname }, goBack } = useHistory()
     const [isMobile, setIsMobile] = useState(isMobileHandle())
     const { t } = useTranslation();
     const { language } = getI18n()
     const [color, setColor] = useState(
          [
               "#FF4F84",  //创世节点的颜色
               "#7D00FB", //超级节点
               "#FFD600", //多级返佣
               "#FFA25E", //节点奖金池
               "#00FF57", //直推奖励 
               "#0075FF"  //黑洞销毁
          ])
     let timerDownRef = useRef<NodeJS.Timeout>()
     const account = useMemo(() => {
          return props.account
     }, [props.account])

     useEffect(() => {
          window.addEventListener('resize', () => {
               setTimeout(() => {
                    setIsMobile(isMobileHandle());
               }, 0);
          });
          return () => {
               window.removeEventListener('resize', () => { });
          };
     }, [])

     useEffect(() => {
          return () => {
               if (!!timerDownRef.current) {
                    clearInterval(timerDownRef.current)
               }
          }
     }, [account, language])
     return (
          <>
               <div className={style.container}>
                    <WhiteHeightSpace height={isMobile ? '30px' : '183px'} />
                    <div className={style.content}>
                         <div className={style.spaceBetween}>
                              <div className={style.spaceBetweenLeft}>
                                   <div className={style.nftNodeTitle}>NFT节点</div>
                                   <WhiteHeightSpace height={'21px'} />
                                   <div className={style.nftNodeSubTitle}>NFT网络化多级裂变，为每个人打造拥有链上永久价值的社交资产</div>
                                   <WhiteHeightSpace height={isMobile ? '20px' : '16px'} />
                                   <div className={style.spaceButtonRow}>
                                        <div className={style.joinAndActive} onClick={() => {
                                             push(RouterConfig.joinAndActive, {})
                                        }}>
                                             加入并激活节点
                                        </div>
                                        <div className={style.checkMyNode} onClick={() => {
                                             push(RouterConfig.myNodeDetail, {})
                                        }}>
                                             查看我的节点详情
                                        </div>
                                   </div>
                                   <WhiteHeightSpace height={isMobile ? '0' : '60px'} />
                              </div>
                              {/* 图表更新 */}
                              <div className={style.spaceBetweenRight}>
                         
                                   {
                                        !isMobile && <WhiteHeightSpace height={'100px'} />
                                   }
                              </div>
                         </div>
                    </div>
                   
                    <div className={style.content}>   
                    </div>
                    <WhiteHeightSpace height={isMobile ? '67px' : '80px'} />
               </div>
          </>

     )
}
export default NftNode